<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪下拉列表</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src:  url('fonts/icomoon.eot?w5ur6f');
            src:  url('./icomoon/fonts/icomoon.eot?w5ur6f#iefix') format('embedded-opentype'),
            url('./icomoon/fonts/icomoon.ttf?w5ur6f') format('truetype'),
            url('./icomoon/fonts/icomoon.woff?w5ur6f') format('woff'),
            url('./icomoon/fonts/icomoon.svg?w5ur6f#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        div{
            font-family: 'icomoon';
            margin: 50px auto;
            width: 100px;
            height: 50px;
            border: 1px solid gray;
        }
        p{
            width: 70px;
            height: 50px;
            line-height: 50px;
            margin: 0;
            padding-left: 30px;
            /* text-align: center; */
        }
        li{
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
            display: none;
            list-style: none;
        }
        /* .li{
            display: block;
            color: orange;
            border: 1px solid orange;
        } */
    </style>
</head>
<body>
    <!-- 鼠标移入显示下拉菜单，移除隐藏 -->
    <div class="appear">
        <p>微博</p>
        <li>私信</li>
        <li>评论</li>
        <li>@我</li>
    </div>

    <script>
        var div=document.querySelector('.appear');
        var lis=document.getElementsByTagName('li')
        var p=document.querySelector('p')
        // console.log(div);
        //鼠标移入显示下拉菜单
        div.onmouseover=function () {
            // console.log(1);
            //遍历元素
            for (var i=0;i<lis.length;i++){
                // lis[i].className='.li';
                lis[i].style.display='block';
                lis[i].style.color='orange';
                lis[i].style.border='1px solid orange';
                p.style.color='orange';
                p.style.backgroundColor='#F1F3F4';
            }
        }
        //鼠标隐藏
        div.onmouseout=function () {
            // console.log(2);
            for (var i=0;i<lis.length;i++){
                lis[i].style.display='none';
                p.style.color='black';
                p.style.backgroundColor='white';
            }
        }
    </script>
</body>
</html>